<%--
  Created by IntelliJ IDEA.
  User: lt
  Date: 2018/6/4
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>


<title>促销管理 - 方案</title>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>
<%--<jsp:include page="../../head.jsp"/>--%>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script src="${contextPath}/static/countjs/regularYz.js"></script>

<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    .ui-jqgrid .ui-priority-secondary{
        background: #d5effc;
    }

    .ui-jqgrid .ui-jqgrid-title{font-size:12px;}    /*修改grid标题的字体大小*/

    .ui-jqgrid-sortable {font-size:12px;}   /*修改列名的字体大小*/

    .ui-jqgrid tr.jqgrow td {font-size:12px; font-family:"宋体"} /*修改表格内容字体*/

    /*****  标题样式  ******/
    .ui-jqgrid-sortable {
        text-align: center;
    }
</style>

<div class="row" id="app">
    <div class="row btnLine">
        <div class="button-len col-sm-12">
            <button class="btn btn-sm btn-white btn-info search-len customBtn"
                    onclick="searchProduct()">
                <i class="ace-icon fa fa-search orange"></i>查询
            </button>
            <%--<shiro:hasPermission name="USER:ADD">--%>
            <button class="btn btn-white btn-sm btn-purple customBtn" id="addCargo">
                <i class="ace-icon fa fa-plus-circle purple"></i> 新增
            </button>
            <%--</shiro:hasPermission>--%>

            <%--<shiro:hasPermission name="USER:EDIT">--%>
            <button class="btn btn-white btn-info btn-sm customBtn" id="editShop">
                <i class="ace-icon fa fa-pencil blue"></i> 修改
            </button>
            <%--<label style="">状态</label>--%>
            <%--<select class="input-sm" id="state">--%>
                <%--<option value="1">有效</option>--%>
                <%--<option value="0">无效</option>--%>
            <%--</select>--%>
            <%--</shiro:hasPermission>--%>
            <%--<button class="btn btn-white btn-info btn-sm customBtn" id="getShopId">--%>
            <%--<i class="ace-icon fa fa-key blue"></i> 授权--%>
        </div>
        <div class="button-len col-sm-12" style="margin-top: 5px;">
            <label>操作时间：</label>
            <input type="text" class="input-sm" id="beginTime" placeholder="开始时间" style="width: 120px;"/>
            <label>至</label>
            <input type="text" class="input-sm" id="endTime" placeholder="结束时间" style="width: 120px;"/>
            <label style="">方案状态：</label>
            <select class="input-sm" id="state">
                <option value="1">全部</option>
                <option value="2">已审核</option>
                <option value="3">未审核</option>
                <option value="4">已终止</option>
            </select>
        </div>
        <div class="button-len col-sm-12" style="margin-top: 5px;">
            <label>分店：</label>
            <input type="text" class="input-sm" id="" placeholder="分店" style="width: 120px;"/>
            <label>会员等级：</label>
            <input type="text" class="input-sm" id="" placeholder="会员等级" style="width: 120px;"/>
            <label>方案编号：</label>
            <input type="text" class="input-sm" id="" placeholder="方案编号" style="width: 120px;"/>
            <label>方案名称：</label>
            <input type="text" class="input-sm" id="" placeholder="方案名称" style="width: 120px;"/>
            <label>操作员：</label>
            <input type="text" class="input-sm" id="" placeholder="操作员" style="width: 120px;"/>

        </div>
    </div>

    <!-- jqGrid 表格框架 -->
    <div class="col-xs-12">
        <table id="grid-promotion-table"></table>
        <div id="grid-promotion-pager"></div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="">
            <div class="modal-content" style="width: 700px;">
                <div class="modal-header" style="font-size: 20px; margin-bottom: -15px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="xc()">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        促销方案维护
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 内容数据开始 -->
                    <div class="button-len col-sm-12" style="margin-top: 2px;text-align: right;">
                        <%--<div class="hide" id="scheme">--%>
                            <label style="" id="schemeTitle" class="hide">促销方式</label>
                            <select class="input-sm hide" id="schemeId" style="height: 24px; width: 130px; margin-right: 25px;">
                                <option selected="selected" value="1">折扣</option>
                                <option value="2">消费满送</option>
                            </select>
                        <%--</div>--%>
                        <button class="btn btn-white btn-sm btn-purple customBtn" id="xia" style="height: 24px">
                            <div style="margin-top: -3px;">下一步</div>
                        </button>
                        <button class="btn btn-white btn-sm btn-purple customBtn hide" id="shang" style="height: 24px">
                            <div style="margin-top: -3px;">上一步</div>
                        </button>
                    </div>

                    <table class="table">
                        <tr>
                            <td style="border-right: solid 1px #F5F5F5;">
                                <div id="basics" style="width: 18px; border: solid 1px #000000; background-color: #F5F5F5;border-radius: 12px 0px 12px 0px;"><b>基本信息</b></div>
                                <div id="detail" style="margin-top: 1px; width: 18px; border: solid 1px #000000;"><b>促销明细</b></div>
                            </td>
                            <td>
                                <!-- 基本信息 -->
                                <table id="table1" class="table">
                                    <tbody>
                                    <tr>
                                        <td>
                                            <label>方案编号：</label>
                                            <input type="text" class="input-sm" id="" placeholder="方案编号" style="width: 180px; height: 20px;"/>
                                        </td>
                                        <td>
                                            <label>审&nbsp;&nbsp;核&nbsp;&nbsp;人:</label>
                                            <input type="text" class="input-sm" id="" placeholder="审核人" style="width: 180px; height: 20px; margin-left: 8px;"/>
                                            <%--<label>操&nbsp;&nbsp;作&nbsp;&nbsp;员:</label>--%>
                                            <%--<input type="text" class="input-sm" id="" placeholder="操作员" style="width: 180px; height: 20px; margin-left: 8px;"/>--%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>方案名称：</label>
                                            <input type="text" class="input-sm" id="" placeholder="方案名称" style="width: 180px; height: 20px;"/>
                                        </td>
                                        <td>
                                            <label>审核日期：</label>
                                            <input type="text" class="input-sm" id="checkTime" placeholder="审核日期" style="width: 180px; height: 20px;"/>
                                            <%--<label>操作日期：</label>--%>
                                            <%--<input type="text" class="input-sm" id="operationTime" placeholder="操作日期" style="width: 180px; height: 20px;"/>--%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>会员等级：</label>
                                            <input type="text" class="input-sm" id="" placeholder="会员等级" style="width: 180px; height: 20px;"/>
                                        </td>
                                        <td>
                                            <label>终&nbsp;&nbsp;止&nbsp;&nbsp;人:</label>
                                            <input type="text" class="input-sm" id="" placeholder="终止人" style="width: 180px; height: 20px; margin-left: 8px;"/>
                                            <%--<label>审&nbsp;&nbsp;核&nbsp;&nbsp;人:</label>--%>
                                            <%--<input type="text" class="input-sm" id="" placeholder="审核人" style="width: 180px; height: 20px; margin-left: 8px;"/>--%>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <label>促销日期：</label>
                                            <input type="text" class="input-sm" id="promotionBeginTime" placeholder="开始时间" style="width: 79px; height: 20px;"/>
                                            <label>至</label>
                                            <input type="text" class="input-sm" id="promotionEndTime" placeholder="结束时间" style="width: 79px; height: 20px;"/>
                                        </td>
                                        <td>
                                            <label>终止日期：</label>
                                            <input type="text" class="input-sm" id="terminationTime" placeholder="终止日期" style="width: 180px; height: 20px;"/>
                                            <%--<label>审核日期：</label>--%>
                                            <%--<input type="text" class="input-sm" id="checkTime" placeholder="审核日期" style="width: 180px; height: 20px;"/>--%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>促销时段：</label>
                                            <input type="text" class="input-sm" id="promotionBeginTimeHH" placeholder="开始时间" style="width: 79px; height: 20px;"/>
                                            <label>至</label>
                                            <input type="text" class="input-sm" id="promotionEndTimeHH" placeholder="结束时间" style="width: 79px; height: 20px;"/>
                                        </td>
                                        <td>
                                            <%--<label>审核日期：</label>--%>
                                            <%--<input type="text" class="input-sm" id="" placeholder="审核日期" style="width: 180px; height: 20px;"/>--%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>促&nbsp;&nbsp;销&nbsp;&nbsp;日:</label>
                                            <input type="checkbox" id="inlineCheckbox1" value="option1">一
                                            <input type="checkbox" id="inlineCheckbox2" value="option2">二
                                            <input type="checkbox" id="inlineCheckbox3" value="option3">三
                                            <input type="checkbox" id="inlineCheckbox4" value="option4">四
                                            <input type="checkbox" id="inlineCheckbox5" value="option5">五
                                            <input type="checkbox" id="inlineCheckbox6" value="option6">六
                                            <input type="checkbox" id="inlineCheckbox7" value="option7">日
                                        </td>
                                        <td>
                                            <%--<label>终&nbsp;&nbsp;止&nbsp;&nbsp;人:</label>--%>
                                            <%--<input type="text" class="input-sm" id="" placeholder="终止人" style="width: 180px; height: 20px; margin-left: 8px;"/>--%>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="2">
                                            <label>方案摘要：</label>
                                            <input type="text" class="input-sm" id="" placeholder="方案摘要" style="width: 400px; height: 20px;"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <label style="float: left;">分店选择：</label>
                                            <input type="text" class="input-sm" id="shopIds" placeholder="分店选择" readonly style="float: left; width:400px; height: 20px;"/>
                                            <div id="getShopId" style="float: left; background-color: #F5F5F5">. . .</div>
                                        </td>
                                    </tr>
                                    </tbody>

                                </table>

                                <!-- 促销明细开始 -->
                                <table id="table3" class="table table-bordered hide">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center">行号</th>
                                            <th style="text-align: center">折扣</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style="text-align: center">
                                                1
                                            </td>
                                            <td style="text-align: right">
                                                <input type="text" class="input-sm" id="" placeholder="0" style="background:transparent;border:0;outline:0;width: 300px; height: 20px; text-align: right;"/>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div id="maiM" class="hide" style="text-align: right;">
                                    <button class="btn btn-white btn-sm btn-purple customBtn" id="addTh" style="height: 24px">
                                        <div style="margin-top: -3px;">新增行</div>
                                    </button>
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">行号</th>
                                            <th style="text-align: center">买满金额</th>
                                            <th style="text-align: center">减少金额</th>
                                        </tr>
                                        </thead>
                                        <tbody id="addTr">
                                        <hr/>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 促销明细结束 -->
                            </td>
                        </tr>
                    </table>

                    <!-- 内容数据结束 -->
                    <div style="text-align: right;">
                        <button class="btn btn-white btn-info btn-sm customBtn btn-xs" type="button" id="submitParent">提交</button>
                    </div>
                </div>
                <%--<div class="modal-footer">--%>
                <%--<button type="button" class="btn btn-default btn-xs" data-dismiss="modal" >添加</button>--%>
                <%--&lt;%&ndash;<button type="button" class="btn btn-primary btn-xs" v-on:click="saveSupplier">提交更改</button>&ndash;%&gt;--%>
                <%--</div>--%>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 数型内容 -->
    <div id="authorizationInfoContent" class="hide">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left" style="width: 200px; border: solid 2px #f5f5f5;">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        <%--<div class="right" style="left: 190px;top: 42px;position: fixed;">--%>
            <%--<div class="button-len col-sm-12" style="margin-top: 5px;">--%>
                <%--<label style="">机构类型：</label>--%>
                <%--&lt;%&ndash;<select class="input-sm" id="shopId" style="height: 20px;">&ndash;%&gt;--%>
                    <%--&lt;%&ndash;<option value="0">全部</option>&ndash;%&gt;--%>
                    <%--&lt;%&ndash;<option :value="obj.shopId" v-for="(obj, index) in arrayShop">{{ obj.shopName }}</option>&ndash;%&gt;--%>
                <%--&lt;%&ndash;</select>&ndash;%&gt;--%>

                <%--<select class="input-sm" id="" style="height: 20px;">--%>
                    <%--<option value="1">全部</option>--%>
                    <%--<option value="2">直营店</option>--%>
                    <%--<option value="3">加盟店</option>--%>
                    <%--<option value="4">加盟总部/加盟商</option>--%>
                <%--</select>--%>

                <%--<label>关键字：</label>--%>
                <%--<input type="text" class="input-sm" id="keyword" placeholder="关键字可输入机构编码、名称进行查询" style="width: 249px; height: 20px;"/>--%>
                <%--<button class="btn btn-sm btn-white btn-info search-len customBtn" style="height: 20px;"--%>
                        <%--onclick="searchShop()">--%>
                    <%--<div style="margin-top: -3.5px;">查询</div>--%>
                <%--</button>--%>
            <%--</div>--%>
            <%--<div class="button-len col-sm-12">--%>
                <%--<table id="grid-zone-table"></table>--%>
                <%--<div id="grid-zone-pager"></div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <div>
            <button id="getShopIdBtn" class="btn btn-success btn-sm" style="left: 718px;top: 450px;position: fixed;">确认</button>
        </div>
    </div>


</div>

<!-- 通用变量 -->
<script type="text/javascript">
    var lastsel;

    var grid_promotion_selector = "#grid-promotion-table";
    var pager_promotion_selector = "#grid-promotion-pager";

    var grid_chux_selector = "#grid-chux-table";
    var pager_chux_selector = "#grid-chux-pager";

    var grid_shop_selector = "#grid-shop-table";
    var pager_shop_selector = "#grid-shop-pager";

    //获取选择数据的Id，（获取单条数据id 使用selrow，获取多条数据Id 使用selarrrow）
    //    var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
    //获取选择数据的的整条数据（数据类型 集合）
    //    var rowData = $(grid_selector).jqGrid('getRowData', id);
    //获取选择数据的Id，（数组类型）
    //    var ids = $(grid_prod_selector).jqGrid('getGridParam', 'selarrrow');


    var laypage = layui.laypage,
        layer = layui.layer
    laydate = layui.laydate;

    var queryModel = {
        //分页参数
        page: '1',
        rows: '100'
    }

    //jqGrid 页面加载完带参数请求
    var filters = {
        "rules": [
            {
                "field": "state",
                "data": '1'
            }
        ]
    };
    var grid_data = {'filters': JSON.stringify(filters)};
    console.log(grid_data)
</script>

<!-- Vue实现类 -->
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            objcte: [],
            priceTypeArray: [],
            parentArray: [],
            arrayShop: [],
        },
        methods: {

        }
    })
</script>

<!-- 事件实现 -->
<script type="text/javascript">
    var lens = 1
    $("#addTh").click(function () {
        var html = '<tr>' +
                '<td style="text-align: center">' + lens + '</td>' +
                '<td style="text-align: right">' +
                '<input type="text" class="input-sm" id="" placeholder="0" style="background:transparent;border:0;outline:0;width: 150px; height: 20px; text-align: right;"/>' +
                '</td>' +
                '<td style="text-align: right">' +
                '<input type="text" class="input-sm" id="" placeholder="0" style="background:transparent;border:0;outline:0;width: 150px; height: 20px; text-align: right;"/>' +
                '</td>' +
            '</tr>';
        $("#addTr").append(html);
        lens++;
    })

    $("#addCargo").click(function () {
        $("#myModal").modal("show")
    })

    $("#schemeId").change(function () {
//        layer.load(1);
        var schemeId = $("#schemeId").val();
        if (schemeId == '1'){
            $("#maiM").addClass("hide");
            $("#table3").removeClass("hide");
        }
        if (schemeId == '2'){
            $("#table3").addClass("hide");
            $("#maiM").removeClass("hide");
        }
//        layer.closeAll('loading');
    })

    //
    $("#getShopIdBtn").click(function () {
        var shopId = '';
        var ids = $(grid_shop_selector).jqGrid('getGridParam', 'selarrrow');
        console.log(ids);
        var len = ids.length;
        if(len == 0){
            layer.msg("提示：请选择店铺！");
            return;
        }
        $("#shopIds").val(ids);
        layer.close(modalIndex);
//        for(var i=0;i<len;i++){
//            var rowData = $(grid_shop_selector).jqGrid('getRowData', ids[i]);
//        }
    });

    $("#xia").click(function () {
        layer.load(1)
        $("#detail").css('background-color','#f5f5f5');
        $("#basics").css('background-color','#FFFFFF');
        $("#detail").css('border-radius','12px 0px 12px 0px');
        $("#basics").css('border-radius', '0px');
        $("#table1").addClass("hide");
        $("#table3").removeClass("hide");
        $("#xia").addClass("hide");
        $("#shang").removeClass("hide");
        $("#schemeTitle").removeClass("hide");
        $("#schemeId").removeClass("hide");
        $("#maiM").addClass("hide");
        layer.closeAll('loading');
    });

    $("#shang").click(function () {
        layer.load(1)
        $("#basics").css('background-color','#f5f5f5');
        $("#detail").css('background-color','#FFFFFF');
        $("#basics").css('border-radius','12px 0px 12px 0px');
        $("#detail").css('border-radius', '0px');
        $("#table3").addClass("hide");
        $("#table1").removeClass("hide");
        $("#shang").addClass("hide");
        $("#xia").removeClass("hide");
        $("#schemeTitle").addClass("hide");
        $("#schemeId").addClass("hide");
        $("#maiM").addClass("hide");
        layer.closeAll('loading');
    });

    $("#basics").click(function () {
        layer.load(1)
        $("#detail").css('background-color','#f5f5f5');
        $("#basics").css('background-color','#FFFFFF');
        $("#basics").css('border-radius','12px 0px 12px 0px');
        $("#detail").css('border-radius', '0px');
        $("#table3").addClass("hide");
        $("#table1").removeClass("hide");
        $("#shang").addClass("hide");
        $("#xia").removeClass("hide");
        $("#schemeTitle").addClass("hide");
        $("#schemeId").addClass("hide");
        $("#maiM").addClass("hide");
        layer.closeAll('loading');
    });

    $("#detail").click(function () {
        layer.load(1)
        $("#detail").css('background-color','#FFFFFF');
        $("#basics").css('background-color','#f5f5f5');
        $("#detail").css('border-radius','12px 0px 12px 0px');
        $("#basics").css('border-radius', '0px');
        $("#table1").addClass("hide");
        $("#table3").removeClass("hide");
        $("#shang").removeClass("hide");
        $("#xia").addClass("hide");
        $("#schemeTitle").removeClass("hide");
        $("#schemeId").removeClass("hide");
        $("#maiM").addClass("hide");
        layer.closeAll('loading');
    });

    /************* 时间事件 **************/
    //开始时间
    $('#beginTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //结束时间
    $('#endTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //促销开始时间
    $('#promotionBeginTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //促销结束时间
    $('#promotionEndTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //促销开始时间
    $('#promotionBeginTimeHH').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "hh:mm:ss",
//        startDate:new Date(),
    });

    //促销结束时间
    $('#promotionEndTimeHH').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "hh:mm:ss",
//        startDate:new Date(),
    });

    //终止时间
    $("#terminationTime").datetimepicker({
        language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            minView: 2,
            showMeridian: 1,
            format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //操作时间
    $("#operationTime").datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });

    //审核时间
    $("#checkTime").datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
//        startDate:new Date(),
    });
</script>

<!-- 调用方法 -->
<script type="text/javascript">

    //删除生成的Div
    var xc = function () {
        $("tr").remove("#addTr tr");
//        $("#addTr").parent('tr').remove()
//        $('tr').parent().remove();
        lens = 1;
    }

    /**
     * 搜索品牌
     */
    function searchProduct() {
        var brandName = $("#brandName").val();
        var parentId = queryModel.parentId;
        var state = $("#state").val();

        //var parentDepartmentkey = $("#id_parentDepartmentkey_name").val();
        var filters = {
            "rules": [
                {
                    "field": "brandName",
                    "data": brandName
                },
                {
                    "field": "state",
                    "data": state
                }
            ]
        };

        console.log(filters)

        jQuery(grid_promotion_selector).jqGrid('setGridParam', {
            postData: {
                "filters": JSON.stringify(filters) //"{'rules' : [{'field' : 'shopName','data' : "+shopName+"},{'field' : 'state','data' : "+state+"}]}"
            }
        }).trigger("reloadGrid");
    }

    /**
     * 搜索店铺
     */
    function searchShop() {

        var keyword = $("#keyword").val();

        var filters = {
            "rules": [{
                "field": "keyword",
                "data": keyword
            }]
        };

        jQuery(grid_shop_selector).jqGrid('setGridParam', {
            postData : {
                "filters" : JSON.stringify(filters) //"{'rules' : [{'field' : 'shopName','data' : "+shopName+"},{'field' : 'state','data' : "+state+"}]}"
            }
        }).trigger("reloadGrid");
    }

    //获取店铺类型
    var getShopType = function () {
        var filters = {
            "rules": [
                {
                    "field": "type",
                    "data": 'kt'
                }
            ]
        };
        queryModel.filters = JSON.stringify(filters);
        $.ajax({
            url: '${contextPath}/ktProd/getShopListByPage',
            type: 'post',
            data: queryModel,
            success: function (data) {
                var dataArray = data;
                console.log(data)
                app.arrayShop = dataArray;
            },
            error: function (error){
                layer.msg("获取出错："+data.message)
            }
        })
    }
</script>

<!-- jqGrid 公用方法 -->
<script type="text/javascript">
    //选中行启用行编辑
    var EditSelectRow = function(grid_id, id)
    {
        //原选中行ID
        if (id != null && id != "" && id.length > 0) {
            $(grid_id).jqGrid('saveRow', id);//保存上一行
        }

        //当前选中行
        $(grid_id).val(id);//临时存储当前选中行
        //$("#fieldGrid").jqGrid('editRow', id);
        $(grid_id).jqGrid('editRow', id, { keys: true, focusField: 1 });
    }

    function style_edit_form(form) {
        //enable datepicker on "sdate" field and switches for "stock" field
        //form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

        //form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
        //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
        //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


        //update buttons classes
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
        buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

        buttons = form.next().find('.navButton a');
        buttons.find('.ui-icon').hide();
        buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
        buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
    }

    function style_delete_form(form) {
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
        buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
    }

    function style_search_filters(form) {
        form.find('.delete-rule').val('X');
        form.find('.add-rule').addClass('btn btn-xs btn-primary');
        form.find('.add-group').addClass('btn btn-xs btn-success');
        form.find('.delete-group').addClass('btn btn-xs btn-danger');
    }

    function style_search_form(form) {
        var dialog = form.closest('.ui-jqdialog');
        var buttons = dialog.find('.EditTable')
        buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
        buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
        buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
    }

    function beforeDeleteCallback(e) {
        var form = $(e[0]);
        if (form.data('styled')) return false;

        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_delete_form(form);
        form.data('styled', true);
    }

    function beforeEditCallback(e) {
        var form = $(e[0]);
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_edit_form(form);
    }


    //it causes some flicker when reloading or navigating grid
    //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
    //or go back to default browser checkbox styles for the grid
    function styleCheckbox(table) {
        /**
         $(table).find('input:checkbox').addClass('ace')
         .wrap('<label />')
         .after('<span class="lbl align-top" />')


         $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
         .find('input.cbox[type=checkbox]').addClass('ace')
         .wrap('<label />').after('<span class="lbl align-top" />');
         */
    }


    //unlike navButtons icons, action icons in rows seem to be hard-coded
    //you can change them like this in here if you want
    function updateActionIcons(table) {
        /**
         var replacement =
         {
             'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
             'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
             'ui-icon-disk' : 'ace-icon fa fa-check green',
             'ui-icon-cancel' : 'ace-icon fa fa-times red'
         };
         $(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
         */
    }

    //replace icons with FontAwesome icons like above
    function updatePagerIcons(table) {
        var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
        })
    }

    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container: 'body'});
        $(table).find('.ui-pg-div').tooltip({container: 'body'});
    }

    //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    $(document).one('ajaxloadstart.page', function (e) {
        $.jgrid.gridDestroy(grid_selector);
        $('.ui-jqdialog').remove();
    });


    var reload = function () {
//        $(grid_promotion_selector).jqGrid('clearGridData');  //清空表格
        $(grid_promotion_selector).jqGrid('setGridParam',{
            url:"${contextPath}/ktProd/getProdBrandListByPage",
            datatype:'json',
//                    postData:param,
            page:1
        }).trigger("reloadGrid"); //重新载入
    }
</script>

<!-- jqGrid加载数据 -->
<script type="text/javascript">
    var scripts = [null, "${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", "${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js", "${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js", "${contextPath}/static/layer/layer.js","${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {

            var parent_column = $(grid_promotion_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_promotion_selector).jqGrid('setGridWidth', parent_column.width());
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_promotion_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 20);
                }
            })

            jQuery(grid_promotion_selector).jqGrid({
                subGrid: false,
                url: "${contextPath}/",
                //data: grid_data,
                datatype: "json",
                mtype: 'POST',
                height: 350,
                colNames: ['方案编号', '方案名称','方案摘要','审核状态','终止状态', '促销起始日期','促销结束日期','促销时段','操作员','操作日期'],
                colModel: [
                    {name: '1', index: '1', editable: true},
                    {name: '2', index: '2'},
                    {
                        name: '3',
                        index: '3',
                        editable: true,
                        sortable: false,
                        editrules: {required: true}
                    },
                    {
                        name: '4',
                        index: '4',
                        editable: false,
                        sortable: false,

                    },
                    {
                        name: '5',
                        index: '5',
                        editable: true,
                        sortable: false,
                        edittype: 'select',
                        formatter: function (v, x, r) {
                            return r['state'] == "1" ? "有效" : "无效";
                        },
                        editoptions: {value: "1:有效;0:无效"}
                    },
                    {name: '6', index: '6', editable: false},
                    {name: '7', index: '7', editable: false},
                    {name: '8', index: '8', editable: false},
                    {name: '9', index: '9', editable: false},
                    {name: '10', index: '10', editable: false},
                ],
                rownumbers: true, //自动行数
//                        width:"1000",
                autowidth:true,  //宽度自适应
//                        height:"100%",   //高度自适应
                viewrecords: true,
                rowNum : 10,//一页显示多少条
                rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
                pager : pager_promotion_selector,//表格页脚的占位符(一般是div)的id
                sortname : 'gmtModifiedStr',//初始化的时候排序的字段
                sortorder : "desc",//排序方式,可选desc,asc
//                mtype : "post",//向后台请求数据的ajax的类型。可选post,get
                altRows: true,
//                toppager: true,
                multiselect: false,
                //multikey: "ctrlKey",
                multiboxonly: false,

                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);
                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                editurl: "${contextPath}/ktSaleProject/saveSaleProject",//nothing is saved
                caption: "促销列表",
                jsonReader: {
                    root: "recordList",
                    page: "currentPage",
                    total: "pageCount",
                    records: "recordCount"
                }
//                editurl : ctx+"/RowEditing",
//                caption : "Using events example"
            });

            jQuery(grid_promotion_selector).jqGrid('navGrid', '#addpager', {
                edit : false,
                add : false,
                del : false,
                search : false
            });

            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size


            function cLink(cellvalue, options, rowObject){
//                console.log(rowObject)
                var id = rowObject.id;
                return '<a href="${contextPath}/sys/user/home#page/franchiseePrementSupplierSuppliercoommdity&id='+id+'" onclick="">'+id+'</a>';
            }


//            /**
//             * 修改某条信息
//             */
//            $("#editShop").click(function () {
//                var id = $(grid_coupon_selector).jqGrid('getGridParam', 'selrow');
//                if (!id) {
//                    layer.msg("提示：请选择一条信息");
//                    return;
//                }
//
//                var rowData = $(grid_coupon_selector).jqGrid('getRowData', id);
////                console.log(rowData.id.split('>')[1].split('<')[0]);
//                rowData.id = rowData.id.split('>')[1].split('<')[0];
////                layer.load(1);
//                getSupplier(rowData);
//                reload();
//
//            });

            /**
             * 删除某条数据
             */
            $("#deleteSupplier").click(function () {
                var id = $(grid_coupon_selector).jqGrid('getGridParam', 'selrow');

                if (!id) {
                    layer.msg("提示：请选择一条信息");
                    return;
                }
                //询问框
                layer.confirm('将会把这条供应商数据删除', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var rowData = $(grid_coupon_selector).jqGrid('getRowData', id);
                    rowData.id = rowData.id.split('>')[1].split('<')[0];
                    queryModel.id = rowData.id;
                    layer.load(1);
                    $.ajax({
                        url: '${contextPath}/ktPurchase/deleteSupplier',
                        type: 'post',
                        data: queryModel,
                        dataType: 'json',
                        success: function (data) {
                            layer.closeAll('loading');
                            if (data.success) {
                                layer.msg('删除成功', {icon: 1});

                            } else {
                                layer.msg(data.message);
                            }
                            reload();

                        },
                        error: function (error) {
                            layer.closeAll('loading');
                            $.jgrid.info_dialog("提示：", "服务器异常，稍后再试");
                        }
                    })
                }, function () {
                });
            });
        });
    });
</script>

<!-- 自动补全 -->
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="${contextPath}/static/util/my-autocomplete-section.js"></script>
<%--<script type="text/javascript">--%>
    <%--var cityNode, quXianNode, channelNode, empNode, custNode, shopNode = null;--%>

    <%--//    empNode = '#empNameInput';--%>
    <%--channelNode = '#channelNameInput';--%>
    <%--cityNode = '#cityNameInput';--%>
    <%--quXianNode = '#quXianNameInput';--%>

    <%--organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);--%>

    <%--$(function () {--%>
        <%--$('[data-toggle="tooltip"]').tooltip()--%>
    <%--});--%>


<%--</script>--%>

<!-- 数型插件 -->
<script type="text/javascript">
    $("#getShopId").click(function(){
        getShopType();
        pageInit();
//        var id = $(grid_promotion_selector).jqGrid('getGridParam', 'selrow');
//        if (!id) {
//            $.jgrid.info_dialog( "提示：", "请选择一条角色信息");
//            return;
//        }
        layer.load(1);
        var setting = {
            check: {
                enable: true,
//                chkStyle: "checkbox",
                //chkboxType: { "Y" : "p", "N" : "ps" }
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: '0',
                },
                key: {
                    name: 'zoneName'
                }
            },
            async: {
                enable: false, // 设置 zTree是否开启异步加载模式  加载全部信息
                url: "${contextPath}/ktProd/getProdType", // Ajax 获取数据的 URL 地址
                autoParam: ["0"],    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
//                dataFilter: queryModels,
            },
            callback: { //回调函数
                /**
                 * event:鼠标事件
                 * treeId：树的容器id
                 * treeNode：当前点击的节点
                 */
                //点击
//                beforeClick: function(treeId, treeNode) {
//                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//                    var node = treeObj.getSelectedNodes();//点击节点后 获取节点数据
//                    if(node.length > 0){
//                        console.log(node[0].name)
//                        $("#h").html(node[0].name)
//                    }
//
//                },
                //双击
                onDblClick: function (treeId, treeNode) {
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var node = treeObj.getSelectedNodes();//点击节点后 获取节点数据
                    console.log(node)
                  }
            }
        };

        var zNodes =[];

        var dataJson = {
            //分页参数
            page: '1',
            rows: '1000',
        }
        $.ajax({
            url : "${contextPath}/ktCommon/getZoneListByPage",
            type : "post",
            dataType : "json",
            data: dataJson,
            async : false,
            success : function(data) {
                layer.closeAll('loading');
                zNodes = data.recordList;
                console.log(zNodes);
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                $("#authorizationInfoContent").removeClass("hide")
                modalIndex = layer.open({
                    type: 1,
                    title: '修改角色权限',
                    closeBtn: 1,
                    shadeClose: true,
                    maxmin: true,
                    area: ['800px', '500px'],
                    skin: 'yourclass',
                    content: $("#authorizationInfoContent"),
                    end: function () {
                        $("#authorizationInfoContent").addClass("hide")
                    }
                });

            },
            error : function () {
                layer.closeAll('loading');
                layer.msg("网络异常")
            }
        });
    })
</script>

<!-- 加载店铺列表 -->
<script type="text/javascript">
    function pageInit(){
        jQuery(grid_shop_selector).jqGrid({
            subGrid: false,
            url : '${contextPath}/ktProd/getShopListByPage',
            datatype: "json",
            mtype: 'POST',
            height: 270,
            colNames: ['店铺编号', '店铺名称'],
            colModel: [
                {name: 'shopId', index: 'shopId', width: 200, editable: true, key: true},
//                    {
//                        name: 'row',
//                        index: 'row',
//                        width: 90,
//                        editable: true,
//                        sortable: false,
//                        editrules: {required: true}
//                    },
                {
                    name: 'shopName',
                    index: 'shopName',
                    width: 331,
                    editable: true,
                    sortable: false,
                    editrules: {required: true}
                }

            ],
//                rownumbers: true, //自动行数
//            height:"100%",   //高度自适应
//			width: "100%",
            autowidth: true,  //宽度自适应
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pager_shop_selector,
            altRows: true,
            //toppager: true,

            multiselect: true,
            //multikey: "ctrlKey",
            multiboxonly: false,

            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);

                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },

            editurl: "${contextPath}/ktProd/getShopListByPage",//nothing is saved
//            caption: "店铺列表",
            jsonReader: {
                root: "recordList",
                page: "currentPage",
                total: "pageCount",
                records: "recordCount"
            },
//                onSelectAll: function(rowids,statue){
//                    //函数里做自己的处理
//					queryModel.rowIds = rowids;
//                },
//                resetSelection: function(rowid){
//
//                    return(rowid)
//				}

            //,autowidth: true,


            /**
             ,
             grouping:true,
             groupingView : {
				 groupField : ['name'],
				 groupDataSorted : true,
				 plusicon : 'fa fa-chevron-down bigger-110',
				 minusicon : 'fa fa-chevron-up bigger-110'
			},
             caption: "Grouping"
             */

        });

        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
    }
</script>